<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增开发项目')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-developproject-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">项目名称：</label>
            <div class="col-sm-8">
                <input name="projectName" class="form-control" type="text" required>
            </div>
        </div>
        <input name="userId" class="form-control" type="text" style="display: none" th:value="${userId}">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">项目行业类型：</label>
            <div class="col-sm-8">
                <select class="form-control" name="projectIndustry" th:with="type=${@dict.getType('projectIndustry_type')}">
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="submitHandler()">新增</button>
        </div>
    </form>
    <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "gis/developproject"
    var userId = [[${userId}]];
    var removeFlag = [[${@permission.hasAnyRoles('develop')}]];
    var datas = [[${@dict.getType('projectIndustry_type')}]];
    $("#form-developproject-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-developproject-add').serialize(), function () {
                $.operate.reload();
            });
        }
    }

    $(function() {
        var options = {
            url: prefix + "/list/"+userId,
            removeUrl: prefix + "/remove",
            modalName: "developproject",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '编号',
                    visible: false
                },
                {
                    field: 'projectName',
                    title: '项目名称'
                },
                {
                    field: 'userName',
                    title: '项目创建人'
                },
                {
                    field: 'projectIndustry',
                    title: '项目行业类型',
                    align: "left",
                    formatter: function(value, item, index) {
                        return $.table.selectDictLabel(datas, item.projectIndustry);
                    }
                },
                {
                    field: 'secretKey',
                    title: '项目开发密钥'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


</script>
</body>
</html>